<template>
  <div id="jztable">
    <el-table :data="tableData" :border="true"  @row-dblclick="rowdbclick">
      <!-- highlight-current-row -->
      <el-table-column
        :label="item.title"
        :prop="item.props"
        v-for="(item, index) in tableTitle"
        :key="index"
        :width="item.width"
      ></el-table-column>
      <el-table-column align="right" :width="280">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            clearable
            @keyup.enter.native="handleInputConfirm"
            placeholder="输入关键字搜索"
          />
          {{scope.rows}}
        </template>
        <template slot-scope="scope" v-if="canEdit">
          <el-button size="mini" @click="rowdbclick(scope.row)">查看</el-button>
          <el-button size="mini" type="warning" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="success" @click="handleSubmit(scope.$index, scope.row)">提交</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pagesizes"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  name: 'jztable',
  methods: {
    handleInputConfirm () {
      // 搜索框 回车 根据search的内容来filter filterTableData 里的数据
      this.$emit(
        'searchInputConfirm',
        this.search,
        this.currentPage,
        this.pagesize
      )
    },
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.pagesize = val
      this.postChangeData()
    },
    handleCurrentChange (val) {
      // console.log(`当前页 ${val} 条`)
      this.currentPage = val
      this.postChangeData()
    },
    handleEdit (index, row) {
      // 弹框出现编辑页面
      console.log(index, row)
    },
    handleLookout (index, row) {
      this.$emit('handleLookout', index, row)
    },
    handleSubmit (index, row) {
      this.$emit('handleSubmit', index, row)
    },
    handleDelete (index, row) {
      // console.log(index, row)
      this.$confirm('确定删除吗', '', {
        type: 'warning'
      })
        .then(() => {
          this.tableData.splice(index, 1)
          this.$emit('handleDelete', index, row)
        })
        .catch(e => {})

      // axios
    },
    rowdbclick (row, event) {
      console.log(row)
      this.$emit('rowdbclick', row)
    },
    postChangeData () {
      this.$emit('pageUpdate', this.currentPage, this.pagesize)
    }
  },
  computed: {
    total () {
      return this.tableData.length
    }
  },
  updated: function () {
    // 这个emit放在updated 原因是
    // 只有当currentPage pagesize改变的时候就会重新POST请求后端 但是如果当这两个值同时改变渲染的情况 就会调用两次 updated
    // 所以每当这两个Data改变的时候就重新AXIOS请求一次
    // this.$emit('updatedtest',this.currentPage) 放在这里是找打 tableData 改一次 重新渲染一次 updated 一次
  },
  props: {
    canEdit: {
      type: Boolean,
      default: () => true
    },
    pagesizes: {
      type: Array,
      default: () => [10, 20, 30, 40]
    },
    tableTitle: {
      type: Array,
      default: () => [
        { title: '时间', props: 'date' },
        { title: '姓名', props: 'name' },
        { title: '地址', props: 'address' }
      ]
    },
    tableData: {
      type: Array,
      default: () => [
        {
          date: '2016-05-02',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎2',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎3',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎4',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    }
  },
  data () {
    return {
      pagesize: 10,
      currentPage: 1,
      search: ''
    }
  }
}
</script>

<style scoped>
</style>
